﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--pageoffice.js一定要引用--->
        <script type="text/javascript" src="../pageoffice.js"></script>
        <script type="text/javascript">
            function ConvertFile() {
                document.getElementById("Button1").disabled = true;

                var saveFileUrl = "/FileMakerModify/SaveDoc";
            var openFileUrl = "/FileMakerModify/FileMakerModify";
                filemakerctrl.SaveFilePage = saveFileUrl;

                filemakerctrl.CallFileMaker({
                url: openFileUrl,
                success: function (res) {//res：获取服务器端fs.CustomSaveResult设置的保存结果
                    console.log(res);
                    console.log("completed successfully.");
                        setProgress(100);
                    },
                    progress: function (pos) {
                        console.log("running " + pos + "%");
                        setProgress(pos);
                    },
                    error: function (msg) {
                        console.log("error occurred: " + msg);
                    }
                });
            }

            function setProgress(percent) {
                var progressBar = document.getElementById("progressBar");
                progressBar.style.width = percent + '%';
                progressBar.innerText = percent + '%';
            }
        </script>
        <style>
            #progressBarContainer {
                width: 500px;
                background-color: #e0e0e0;
                border-radius: 5px;
                padding: 3px;
                margin: 10px auto;
            }

            #progressBar {
                height: 20px;
                width: 0%;
                background-color: #76b900;
                border-radius: 5px;
                text-align: center;
                line-height: 20px; /* 使文字垂直居中 */
                color: white;
            }
        </style>
    </head>
    <body>
        <div style="text-align: center;">
            <h3 style="margin:20px;">演示：在不打开文件的情况下用程序修改文档指定区域内容</h3>
            <div style="width:680px;margin: 0 auto; font-size:14px;">
                <p style="text-align: left;">
                    演示内容：<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;本示例展示了如何利用FileMaker对象，在无需显示打开文件界面的情况下，修改Word文档中指定区域的内容，并自动将修改后的文件保存到服务器上。
                </p>
                <p style="text-align: left;">
                    操作说明：<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;1. 点击“修改日期”按钮，执行后台程序把证书文件“maker.doc”中的日期改为今天：<span id="today"></span>。<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;2. 程序执行完毕后，即可在“FileMakerModify/doc”目录下查看maker.doc文件修改后的效果。
                </p>
            </div>
            <input id="Button1" type="button" value="修改日期" onclick="ConvertFile()" />
            <div id="progressBarContainer">
                <div id="progressBar"></div>
            </div>
        </div>
        <script>
            function getFormattedDate() {
                var today = new Date();
                var year = today.getFullYear();
                var month = today.getMonth() + 1; // 月份是从0开始的
                var day = today.getDate();

                // 确保月份和日期是两位数
                month = month < 10 ? '0' + month : month;
                day = day < 10 ? '0' + day : day;

                return year + '-' + month + '-' + day;
            }
            document.getElementById('today').innerText = getFormattedDate();
        </script>
    </body>
</html>
